setPage();

//通过事件委托添加点击事件
$('.container').click(function (e) {
    let cart = JSON.parse(localStorage.cart);

    if ($(e.target).attr('name') === 'all') {
        for (let i = 0; i <= cart.length - 1; i++) {
            cart[i].buy = $(e.target).prop('checked');
        }
    } else if ($(e.target).attr('name') === 'other') {
        for (let i = 0; i <= cart.length - 1; i++) {
            if (cart[i].goods_id === $(e.target).attr('goods_id')) {
                cart[i].buy = $(e.target).prop('checked');
                break;
            }
        }
    } else if ($(e.target).attr('name') === '-') {
        for (let i = 0; i <= cart.length - 1; i++) {
            if (cart[i].goods_id === $(e.target).attr('goods_id')) {
                cart[i].num--;
                break;
            }
        }
    } else if ($(e.target).attr('name') === '+') {
        for (let i = 0; i <= cart.length - 1; i++) {
            if (cart[i].goods_id === $(e.target).attr('goods_id')) {
                cart[i].num++;
                break;
            }
        }
    } else if ($(e.target).attr('name') === 'del') {
        for (let i = 0; i <= cart.length - 1; i++) {
            if (cart[i].goods_id === $(e.target).attr('goods_id')) {
                cart.splice(i, 1);
                break;
            }
        }
    }

    localStorage.cart = JSON.stringify(cart);

    setPage();
})



//动态加载页面数据
function setPage() {
    // 定义变量存储数据 
    let flag = true;
    // 购买商品种类
    let type = 0;
    // 购买商品数量
    let number = 0;
    // 购买商品总价
    let pay = 0;
    //获取localStorage中购物车数据信息
    let cart = localStorage.cart;

    if (cart === undefined) {
        $('.container').html('<h1>您是第一次购物,还没有创建购物车</h1>');
    } else {
        cart = JSON.parse(cart);

        if (cart.length === 0) {
            $('.container').html('<h1>你的购物车已经清空了,快去添加你喜欢的商品吧 O(∩_∩)O</h1>');
        } else {
            let str = `
                <div class="panel panel-info ">
                <div class="panel-body bg-info">
                <div class="checkbox">
                    <label>
                    <input name="all" type="checkbox" value="">
                    全选
                    </label>
                </div>
                </div>
                <div class="panel-footer">
                <ul class="cart-list">
                `;
            cart.forEach(function (item) {
                if (item.buy === false) {
                    flag = false;
                } else {
                    type++;

                    number += item.num;
                    pay += item.num * item.goods_price;
                }
                str += `
                <li class="cart-item">
                <div class="left">
                  <input name="other" goods_id="${item.goods_id}" type="checkbox" ${item.buy ? 'checked' : ''}>
                </div>
                <div class="right">
                  <div class="media">
                    <div class="media-left">
                      <a href="#">
                        <img class="media-object" src="${item.goods_small_logo}" alt="...">
                      </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">${item.goods_name}</h4>
                      <p>
                        <i class="glyphicon glyphicon-yen"></i>
                        <span>${item.goods_price}</span>
                      </p>
                      <div class="btn-group pull-right" role="group" aria-label="...">
                        <button name="-" goods_id=${item.goods_id} type="button" class="btn btn-default" ${item.num === 1 ? 'disabled' : ''}>-</button>

                        <button type="button" class="btn btn-default" disabled>${item.num}</button>

                        <button name="+" goods_id=${item.goods_id} type="button" class="btn btn-default" ${item.num === Number(item.goods_number) ? 'disabled' : ''}>+</button>
                      </div>
                      <button name="del" goods_id=${item.goods_id} class="del btn btn-danger">我不要了</button>

                    </div>
                  </div>
                </div>
              </li>
                `
            })
            str += `
                    </ul>
                    <div>
                    <h1>您一共购买${type}种商品</h1>
                    <h1>您一共购买${number}件商品</h1>
                    <h1>您一共需要支付${pay.toFixed(2)}元</h1>
                    </div>
                </div>
                </div>
            `;
            $('.container').html(str);
        }
        $('[name="all"]').prop('checked', flag);
    }
}